<!--
 * @Descripttion: 查看项目询价
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-25 10:39
 * @LastEditors: a12
 * @LastEditTime: 2020-10-25 10:39
-->
<template>
  <div>
    <div class="page-box">
      <el-row class="base-box" :gutter="20">
        <el-col :span="12">
          <h3 class="box-title">项目基本信息</h3>
          <el-form class="base-box-info" label-width="160px" :label-position="labelPosition" size="mini" label-suffix=":">
            <el-row :gutter="20">
              <el-col>
                <el-form-item label="项目名称">{{baseInfo.projectName}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目编号">{{baseInfo.projectNo}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目状态">{{baseInfo.projectStateName}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托状态" style="color: blue; font-size: 24px;">{{baseInfo.orderStateStr}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最多报价次数">{{baseInfo.bidNumber}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="询价开始时间">{{baseInfo.startTime|formeTime}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="询价结束时间">{{baseInfo.endTime|formeTime}}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="总预算(元)" class="budget">{{baseInfo.sumBudgetStr}}</el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="交货期">{{baseInfo.requireDate|formeTime}}至{{baseInfo.requireEndDate|formeTime}}</el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="送货地点">{{baseInfo.requireAddress}}</el-form-item>
              </el-col>
              <el-col v-if="baseInfo.projectState === '00026_5'">
                <el-form-item label="询价失败原因">{{baseInfo.invalidRemark}}</el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="委托说明">{{baseInfo.orderRemark}}</el-form-item>
              </el-col>
              <el-col v-for="(item, index) in rulesInfo" :key="index">
                <el-form-item :label="item.controlName">{{item.detailName}}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="12" class="base-box-bid">
          <h2 class="base-box-bid-time">
            <span>
              <i class="el-icon-time base-box-bid-time-icon"></i>
              <!--  倒计时、正在询价  -->
              距离结束时间：{{['00026_0','00026_1'].includes(baseInfo.projectState) ? strCountdown : '已结束'}}
            </span>
              已报名次数：{{number}}/{{baseInfo.bidNumber}} 次
          </h2>
          <p class="box-title base-box-bid-title">报价排名<span class="base-box-bid-hint">（报价时间以商城系统时间为准，请供应商及时刷新页面，建议供应商尽早完成报价）</span></p>
          <div class="base-box-bid-list">
            <el-table border style="width: 100%" :data="rankingList" max-height="260px" >
              <el-table-column label="排名" width="50" prop="rowNum"></el-table-column>
              <el-table-column label="供应商" width="140">
                <template slot-scope="scope">
                  <el-popover placement="top" trigger="hover">
                    <div class="cell-content">{{scope.row.suppChinaName}}</div>
                    <p class="overflow" slot="reference">{{scope.row.suppChinaName}}</p>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="总价(元)" prop="sumPriceStr"></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <!--  询价列表    -->
      <div>
        <h3 class="box-title">询价列表</h3>
        <div class="base-box-bid-list">
          <el-table  border style="width: 100%" :data="demandList" max-height="260px">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form class="demo-table-expand" :model="props.row" label-width="80px" label-position="left">
                  <el-form-item label="备注说明" style="text-align: left">{{props.row.remark}}</el-form-item>
                  <el-form-item label="附件">
                    <template slot-scope="scope">
                      <el-button type="text" @click="clickHandlePreview(scope.row.entrustDocument)">{{scope.row.entrustDocument|formatFile}}</el-button>
                    </template>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column label="总预算(元)" prop="budgetStr"></el-table-column>
            <el-table-column label="单价预算(元)" prop="priceStr"></el-table-column>
            <el-table-column label="数量" prop="buyNum"></el-table-column>
            <el-table-column label="单位" prop="unit"></el-table-column>
<!--            <el-table-column label="规格" prop="specification"></el-table-column>-->
            <el-table-column label="型号" prop="typeNo"></el-table-column>
<!--            <el-table-column label="标准" prop="qualityStandard"></el-table-column>-->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import {queryProOrderInfo,
    getBiddingRules,
    querySecondTime,
    pageQueryProBiddingList,
    supBidBiddingQueryList,
    bidBiddingHistoryQueryCount,
    getProGoodsByOrderId
  } from '@/api/supplier.api'
  import {queryDictionaryList,getFileInfo} from '@/api/common.api'
  export default {
    name: 'view-bid-details',
    components: {},
    data() {
      return {
        // 附件
        fileUrl:'',
        fileHeaders:{},
        attactments: [],
        dialogVisible:false,
        dialogImageUrl:'',
        fileList:[],

        stateList:[],
        baseInfo:{},
        rulesInfo:[],

        timer:'', // 定时器
        countdown: 0, // 倒计时
        strCountdown:'', //倒计时显示文字

        labelPosition:'right',
        number: '0',
        rules: {
          name: [
            { required: true, message: '请输入联系人名称', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入联系人手机', trigger: 'blur' }
          ]
        },
        projectId:'',
        rankingList:[],
        demandList:[]
      }
    },
    watch: {},
    computed: {},
    filters: {
      formatFile(value) {
        if (value !== null && value !== undefined && value) {
          const objItem = JSON.parse(value)
          return objItem.name
        } else {
          return ''
        }
      },
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      }
    },
    created() {
    },
    mounted() {
      this.projectId = this.$route.query.projectId
      // 查询询价次数
      this.bidBiddingHistoryQueryCountFn()
      // 查询项目状态
      this.queryProjectStatusListFn()
      // 查询供应商本人累计询价次数
      // this.supBidBiddingQueryListFn()
      // 项目基本信息
      this.queryProOrderInfoFn()
      // 查询项目询价规则
      this.getBiddingRulesFn()
      // 项目询价排名列表
      this.pageQueryProBiddingListFn()
    },
    methods: {
      // 预览附件
      clickHandlePreview (value) {
        if (value !== null && value !== undefined && value) {
          let objItem = ''
          if(value instanceof Object) {
            objItem = value
          } else {
            objItem = JSON.parse(value)
          }
          // 获取附件信息
          getFileInfo(objItem.fileType,objItem.id).then(res=>{
            if (['image/png','image/jpeg'].includes(res.contextType)) {
              this.dialogImageUrl = res.url
              this.dialogVisible = true
            } else {
              // 下载
              document.location.href = res.url
            }
          })
        }
      },
      /**
       * @description 查询询价次数
       * @author 穆宏宇
       * @date 2020-11-03 11:44:48
       * @param
       * @return
       * */
      bidBiddingHistoryQueryCountFn () {
        bidBiddingHistoryQueryCount(this.projectId).then(res=>{
          this.number = res
        })
      },
      /**
       * @description 查询项目状态
       * @author 穆宏宇
       * @date 2020-10-13 10:19:10
       * @param
       * @return
       * */
      queryProjectStatusListFn () {
        const param = {dictionaryType: 'project_status'}
        queryDictionaryList(param).then(res=>{
          this.stateList = res
        })
      },
      /**
       * @description
       * @author 穆宏宇
       * @date 2020-10-25 17:56:53
       * @param
       * @return
       * */
      supBidBiddingQueryListFn () {
        supBidBiddingQueryList({fkProProjectsId: this.projectId}).then(res=>{
          this.number = res.length
        })
      },
      /**
       * @description 查询订单详情列表
       * @author 穆宏宇
       * @date 2020-10-20 09:10:11
       * @param
       * @return
       * */
      getdetailsByOrderIdFn(orderId) {
        getProGoodsByOrderId(orderId).then(res=>{
          this.demandList = res
        })
      },
      /**
       * @description 项目询价排名列表
       * @author 穆宏宇
       * @date 2020-10-25 15:41:59
       * @param
       * @return
       * */
      pageQueryProBiddingListFn (){
        pageQueryProBiddingList({projectId:this.projectId,current:1,size:99999999}).then(res=>{
          this.rankingList = res.records
        })
      },
      /**
       * @description 项目基本信息
       * @author 穆宏宇
       * @date 2020-10-14 14:46:35
       * @param
       * @return
       * */
      queryProOrderInfoFn (){
        queryProOrderInfo(this.projectId).then(res=>{
          this.baseInfo = res
          // 项目状态code转文字
          for (let item in this.stateList) {
            if (this.baseInfo.projectState === this.stateList[item].dictionaryKey1) {
              this.baseInfo['projectStateName'] = this.stateList[item].optional1
              break
            }
          }
          // 查询订单详情列表
          this.getdetailsByOrderIdFn(res.fkEntrustsId)
          // 项目倒计时/正在询价
          if (['00026_0','00026_1'].includes(res.projectState)) {
            // 查询项目距离报名时间
            this.querySecondTimeFn()
          }
        })
      },
      /**
       * @description 查询项目询价规则
       * @author 穆宏宇
       * @date 2020-10-14 15:04:02
       * @param
       * @return
       * */
      getBiddingRulesFn () {
        getBiddingRules(this.projectId).then(res=>{
          this.rulesInfo = res
        })
      },
      /**
       * @description 查询项目距离报名时间
       * @author 穆宏宇
       * @date 2020-10-15 13:10:21
       * @param
       * @return
       * */
      querySecondTimeFn () {
        const self = this
        querySecondTime({endTime:this.baseInfo.endTime}).then(res=>{
          self.countdown = res
          self.timer = window.setInterval(() => {
            if (self.countdown >= 0) {
              self.countdownFn(self.countdown)
            } else {
              window.clearInterval(self.timer) //清除定时器
            }
          } ,1000)
        })
      },
      // 倒计时执行方法
      countdownFn(second){
        this.countdown= this.countdown - 1
        this.strCountdown = this.$tools.timeStamp(second)
      }
    },
    beforeDestroy () {
      if (this.timer) {
        // window.clearInterval(this.timer) //清除定时器
        this.timer = null
      }
    }
  }

</script>

<style scoped lang="scss">
$red: #ff5438;
$border-line: 2px solid cornflowerblue;
.page-box {
  padding: 20px;
  background-color: white;
}
.box-title {
  border-bottom: $border-line;
}
.base-box {
  &-info {
    padding-top: 10px;
    .budget {
      color: $red;
      font-size: 18px;
    }
  }
  &-bid {
    &-title {
      margin-top: 10px;
    }
    &-time {
      padding: 10px;
      border: $border-line;
      color: $red;
      &-icon {
        color: black;
        font-weight: bold;
      }
    }
    &-hint {
      color: $red;
    }
    &-list {
      padding: 10px;
    }
    &-total {
      padding: 10px 20px;
      margin-bottom: 20px;
      text-align: right;
      border-left: 2px solid goldenrod;
      background: gold;
      &-num {
        color: $red;
        font-size: 18px;
      }
    }
  }
}

.submit-info {
  &-form{
    padding-top: 20px;
  }
  &-btns {
    text-align: center;
  }
}
.cell-content {
  width: 200px;
  min-height: 20px;
  max-height: 200px;
  overflow-y: auto;
}
// 将el-table的展开图标替换为其他图标
::v-deep .el-table__expand-icon{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

::v-deep .el-table__expand-icon
::v-deep .el-icon-arrow-right:before{
  content: "\e6d9";
  border: 1px solid #ccc;
  padding: 2px;
}

::v-deep .el-table__expand-icon--expanded
::v-deep .el-icon-arrow-right:before{
  content: "\e6d8";
}
</style>

